<template>
  <div id="MyQues">
    <!--头部区域-->
    <div class="q-header">
      <el-row>
        <!--头部左边区-->
        <el-col :span="14">
          <div class="grid-content bg-purple">
            <el-row :gutter="30">
              <el-col :span="5">
                <div class="grid-con first-grid">
                  <img />
                  <span>彩问卷</span>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-con bg-purple">
                  <router-link to="/createques">
                    <span>创建问卷</span>
                  </router-link>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-con bg-purple">
                  <router-link to="/myques">
                    <span class="active">我的问卷</span>
                  </router-link>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-con bg-purple">
                  <router-link to="/statques">
                    <span>统计分析</span>
                  </router-link>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-con bg-purple">
                  <span>权限设置</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <!--头部右边区-->
        <el-col :span="4" :offset="6">
          <div class="grid-content-right">
            <img />
            <span class="username">user112</span>
            <span class="vertical-hr"></span>
            <span class="quit">退出</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--内容区域-->
    <div class="my-body">
      <div class="my-header">
        <button><i class="el-icon-plus"></i>&nbsp;&nbsp;创建问卷</button>
      </div>
      <div class="my-content">
        <el-table :data="tableData" border style="width: 100%" height="80vh">
          <el-table-column prop="date" label="问卷" align="center" width="260px">
          </el-table-column>
          <el-table-column prop="name" label="状态" align="center">
            <template slot-scope="scope">
              <i :class="scope.row.classId"></i>
              <span>{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="province" label="类型" align="center">
          </el-table-column>
          <el-table-column prop="city" label="回收量" align="center">
          </el-table-column>
          <el-table-column prop="address" label="创建时间" align="center">
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="260px">
            <template slot-scope="scope">
              <el-button v-model="ismask" @click="ismask=!ismask" type="text" size="small">开始调查</el-button>
              <el-button type="text" size="small">暂停调查</el-button>
              <el-button type="text" size="small" @click="excel(scope.row.qId)">导出excel</el-button>
              <el-button type="text" size="small" v-model="MoreMask" @click="more(scope.row.qId)">更多</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--查看更多遮罩层-->
        <transition name="fade">
          <div class="more-mask" v-if="MoreMask">
            <ul>
              <li>
                <a href="#" @click="changeismask()">开始调查</a>
              </li>
              <li>
                <a href="#">暂停调查</a>
              </li>
              <li>
                <a href="#" prop="qId" @click="excel(queId)">导出excel</a>
              </li>
              <div class="hr"></div>
              <li>
                <a href="#">统计分析</a>
              </li>
              <li>
                <a href="#">清空数据</a>
              </li>
              <div class="hr"></div>
              <li>
                <a href="#">编辑</a>
              </li>
              <li>
                <a href="#">复制</a>
              </li>
              <li>
                <a href="#">打印</a>
              </li>
              <li>
                <a href="#" @click="changeisdelmask()">删除</a>
              </li>
              <li>
                <a href="#">重命名</a>
              </li>
              <li>
                <a href="#" @click="changeiseditmask()">问卷设置</a>
              </li>
            </ul>
          </div>
        </transition>
      </div>
    </div>
    <!--问卷设置遮罩层区域一-->
    <div class="hidden" v-bind:class="{mask:iseditmask}">
      <div class="qm-content">
        <h5>问卷设置</h5>
        <p class="Emp1">
          <span>回收设置</span>
          <el-switch v-model="value2" active-color="#169BD5" inactive-color="#ccc"></el-switch>
          <span class="mar-left">设定回收结束时间</span>
        </p>
        <div class="block">
          <el-date-picker v-model="value7" type="daterange" align="left" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">

          </el-date-picker>
        </div>
        <p class="Emp2">
          <span>整体范围设置</span>
          <el-switch v-model="value4" active-color="#169BD5" inactive-color="#ccc"></el-switch>
          <span class="mar-left">设定全覆盖范围的随机抽样比列</span>
        </p>
        <p class="Emp3">
          <span>范围设置</span>
          <select>
            <option>组织架构</option>
          </select>
          <span class="mar-left">设定问卷推送范围</span>
          <input type="button" value="导入" />
        </p>
        <div class="orga-checkbox">
          <el-tree :data="data2" show-checkbox node-key="id" :props="defaultProps">

          </el-tree>
        </div>
        <p class="Emp4">
          <span>多阶段高级设置</span>
          <el-switch v-model="value5" active-color="#169BD5" inactive-color="#ccc"></el-switch>
        </p>
        <div class="qm2-content" v-if="value5">
          <table>
            <tr>
              <th>阶段名称</th>
              <th>时间段</th>
              <th>覆盖率</th>
            </tr>
            <tr>
              <td>
                <input type="text" v-model="quarter" value="{quarter}" />
              </td>
              <td>
                <el-date-picker v-model="value112" type="date" placeholder="选择日期">
                </el-date-picker>
                至
                <el-date-picker v-model="value212" type="date" placeholder="选择日期">
                </el-date-picker>
              </td>
              <td><span>1/3</span></td>
            </tr>
            <tr>
              <td>
                <input type="text" v-model="quarter" value="{quarter}" />
              </td>
              <td>
                <el-date-picker v-model="value312" type="date" placeholder="选择日期">
                </el-date-picker>
                至
                <el-date-picker v-model="value313" type="date" placeholder="选择日期">
                </el-date-picker>
              </td>
              <td><span>1/3</span></td>
            </tr>
          </table>
        </div>
        <div class="mask-btn">
          <button class="mbtn1" @click="iseditmask=!iseditmask">取消</button>
          <button class="mbtn2" @click="update()">确定</button>
        </div>
      </div>
    </div>
    <!--开始调查遮罩区-->
    <div class="hidden" v-bind:class="{mask:ismask}">
      <div class="qm-content">
        <h5>开始调查</h5>
        <span class="close" v-model="ismask" @click="ismask=!ismask">X</span>
        <div class="address">
          <input type="text" v-model="urladdress" value="urladdress" />
          <button class="addbtn1">复制</button>
          <button class="addbtn2">打开</button>
        </div>
        <p class="Emp1">
          <span>推送范围</span>
          <select>
            <option>组织架构</option>
            <option>其他</option>
          </select>
          <input type="button" value="导入" />
        </p>
        <div class="start-body">
          <div class="orga-checkbox">
            <el-tree :data="data2" show-checkbox node-key="id" :props="defaultProps">

            </el-tree>
            <button class="load-more">加载更多</button>
          </div>
          <div class="orga-right">
            <table id="tab1">
              <tr>
                <th>总业主数</th>
                <th>总业主数</th>
                <th>当前覆盖率</th>
              </tr>
              <tr>
                <td>100220户</td>
                <td>5220户</td>
                <td>23%</td>
              </tr>
            </table>
            <table id="tab2">
              <tr>
                <th>小区覆盖率</th>
                <th>起止时间</th>
              </tr>
              <tr>
                <td>1/6</td>
                <td>2017.10.01-2017.10.12</td>
              </tr>
            </table>
          </div>
        </div>
        <div class="mask-btn">
          <button class="mbtn1" v-model="ismask" @click="ismask=!ismask">取消</button>
          <button class="mbtn2">推送</button>
        </div>
      </div>
    </div>
    <!--遮罩层-->
    <div class="hidden" v-bind:class="{mask:isdelmask}">
      <div class="m-content">
        <p class="p1">确定删除该题目？<i class="el-icon-close" v-model="isdelmask" @click="isdelmask=!isdelmask"></i></p>
        <p class="p2">{{STitle}}</p>
        <div class="mask-btn">
          <button class="mbtn1" v-model="isdelmask" @click="isdelmask=!isdelmask">取消</button>
          <button class="mbtn2" v-model="SDelId" @click="delQue(queId)">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        value7: '',
        queId: '',
        MoreMask: false,
        isdelmask: false,
        iseditmask: false,
        ismask: false,
        urladdress: 'https://www.baidu.com',
        //遮罩层复选框树形控件
        data2: [{
          id: 1,
          label: '华南区',
          children: [{
            id: 4,
            label: '惠州事业部',
            children: [{
              id: 9,
              label: '东城区'
            }, {
              id: 10,
              label: '西城区',
              children: [{
                id: 11,
                label: '老城区'
              }]
            }]
          }]
        }, {
          id: 2,
          label: '华北区',
          children: [{
            id: 5,
            label: '彩生活大厦'
          }, {
            id: 6,
            label: '德香名苑小区'
          }]
        }, {
          id: 3,
          label: '华北区',
          children: [{
            id: 7,
            label: '广州销售部'
          }, {
            id: 8,
            label: '深圳聚财部'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        //表格内容区域
        tableData: [{
          qId: '1',
          date: '示例--问卷调研用户使用习惯调查(1208107)',
          name: '正在回收',
          province: '商业住宅',
          city: '0',
          address: '2017.10.02',
          classId: 'active'
        }, {
          qId: '2',
          date: '示例--问卷调研用户使用习惯调查(1208107)',
          name: '暂停回收',
          province: '商业住宅',
          city: '0',
          address: '2017.10.02',
          classId: 'pause'
        }]
      }
    },
    methods: {
      more(qId) {
        if(this.MoreMask == true) {
          this.MoreMask = false;
        } else {
          this.MoreMask = true
        }
        console.log(qId);
        this.queId = qId;
      },
      changeiseditmask() {
        this.iseditmask = true;
        this.MoreMask = false;
        console.log(this.queId);
        var user = JSON.parse(sessionStorage.getItem('user'));
        console.log(sessionStorage.getItem('user'));
        axios({
          method: 'post',
          url: '/investigator/questionnairePc/selectQuestionnaire',
          headers: {
            'Content-Type': 'application/json'
          },
          data: {
            qID: this.queId
          }
        }).then(function(res) {
          console.log(res.data.data)
        }).catch(function(error) {
          console.log("访问失败！")
        })
        axios({
            method: 'post',
            url: '/investigator/area/getArea?accountUuid=' + user.accountUuid + '&username=' + user.username + '&corpId=' + user.corpId + '&pageIndex=' + 1 + '&pageSize=' + 10 + '&parentId=' + 0,
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(function(res) {
            console.log(res.data.data)
          }).catch(function(error) {
              var obj = {
                  "code": 0,
                  "message": "success",
                  "content": [{
                    "orgUuid": "e9bb0caf-57ff-476c-a85d-c9c18595a0aa",
                    "corpId": "a8c58297436f433787725a94f780a3c9",
                    "parentId": "0",
                    "dn": "ou=abc1,dc=a8c58297436f433787725a94f780a3c9",
                    "name": "abc1",
                    "province": "北京市",
                    "city": "北京市",
                    "region": "东城区",
                    "longitude": null,
                    "latitude": null,
                    "orgType": "",
                    "orgTypeId": null,
                    "dr": null,
                    "status": 0,
                    "memo": "0",
                    "updateTs": "2018-05-03 17:38:12",
                    "createTs": "2017-09-22 01:08:22",
                    "familyType": "组织架构",
                    "familyTypeId": "0",
                    "sort": 77,
                    "orgLevel": "三级"
                  }, {
                    "orgUuid": "fe35ee03-bc7b-4a99-ab98-112ba9407774",
                    "corpId": "a8c58297436f433787725a94f780a3c9",
                    "parentId": "0",
                    "dn": "ou=安阳万达广场,dc=a8c58297436f433787725a94f780a3c9",
                    "name": "安阳万达广场",
                    "province": "河南省",
                    "city": "安阳市",
                    "region": "文峰区",
                    "longitude": 0.00,
                    "latitude": 0.00,
                    "orgType": "小区",
                    "orgTypeId": "3fb88a3b-7fcc-45ff-aec0-731a7ad299b2",
                    "dr": null,
                    "status": 0,
                    "memo": "",
                    "updateTs": "2018-04-25 09:26:16",
                    "createTs": "2015-03-24 22:46:57",
                    "familyType": "组织架构",
                    "familyTypeId": "0",
                    "sort": 76,
                    "orgLevel": ""
                  }, {
                    "orgUuid": "d48d93a8-3e0d-4ce5-8a3c-380cbc3db0b6",
                    "corpId": "a8c58297436f433787725a94f780a3c9",
                    "parentId": "0",
                    "dn": "ou=cxsa,dc=a8c58297436f433787725a94f780a3c9",
                    "name": "cxsa",
                    "province": "110000",
                    "city": "110100",
                    "region": "",
                    "longitude": null,
                    "latitude": 1.00,
                    "orgType": "大区",
                    "orgTypeId": "11e997fc-bd82-436a-94ed-e3f303f269d0",
                    "dr": null,
                    "status": 0,
                    "memo": "0",
                    "updateTs": "2018-04-25 09:17:01",
                    "createTs": "2017-09-22 06:20:45",
                    "familyType": "组织架构",
                    "familyTypeId": "0",
                    "sort": 75,
                    "orgLevel": ""
                  }, {
                    "orgUuid": "e347b051-4cdd-4a30-891d-b960da7fb3f7",
                    "corpId": "a8c58297436f433787725a94f780a3c9",
                    "parentId": "0",
                    "dn": "ou=ggg,dc=a8c58297436f433787725a94f780a3c9",
                    "name": "ggg",
                    "province": "110000",
                    "city": "110100",
                    "region": "",
                    "longitude": null,
                    "latitude": null,
                    "orgType": "事业部",
                    "orgTypeId": "88f2f939-0d19-4835-aa09-3699fd5bf113",
                    "dr": null,
                    "status": 0,
                    "memo": "0",
                    "updateTs": "2018-05-02 17:48:53",
                    "createTs": "2017-09-22 03:45:40",
                    "familyType": "组织架构",
                    "familyTypeId": "0",
                    "sort": 73,
                    "orgLevel": ""
                  }, {
                    "orgUuid": "e3e4e42e-7112-4f20-a6f0-9cfc7d6e3868",
                    "corpId": "a8c58297436f433787725a94f780a3c9",
                    "parentId": "0",
                    "dn": "ou=阿迪王,dc=a8c58297436f433787725a94f780a3c9",
                    "name": "阿迪王",
                    "province": "120000",
                    "city": "110100",
                    "region": "",
                    "longitude": null,
                    "latitude": null,
                    "orgType": "未知",
                    "orgTypeId": "7fa6e440-5018-4666-a1e8-4cfd57fbf639",
                    "dr": null,
                    "status": 0,
                    "memo": "0",
                    "updateTs": "2018-04-25 09:16:50",
                    "createTs": "2017-09-22 03:31:16",
                    "familyType": "组织架构",
                    "familyTypeId": "0",
                    "sort": 73,
                    "orgLevel": "3星级"
                  }, {
                    "orgUuid": "d30a5374-c30f-11e5-8697-9bf1e8b5d302",
                    "corpId": "a8c58297436f433787725a94f780a3c9",
                    "parentId": "0",
                    "dn": "ou=供应商合作单位,dc=a8c58297436f433787725a94f780a3c9",
                    "name": "供应商合作单位",
                    "province": "北京市",
                    "city": "北京市",
                    "region": "东城区",
                    "longitude": 0.00,
                    "latitude": 0.00,
                    "orgType": "彩生活集团",
                    "orgTypeId": "342c68e5-df7b-41c0-bacb-51d92e8ac755",
                    "dr": null,
                    "status": 0,
                    "memo": "",
                    "updateTs": "2017-12-05 17:32:56",
                    "createTs": "2016-01-25 20:00:00",
                    "familyType": "组织架构",
                    "familyTypeId": "0",
                    "sort": 72,
                    "orgLevel": "1星级"
                  }, {
                    "orgUuid": "d30a9da2-c30f-11e5-8697-9bf1e8b5d302",
                    "corpId": "a8c58297436f433787725a94f780a3c9",
                    "parentId": "0",
                    "dn": "ou=彩生活业务承包单位,dc=a8c58297436f433787725a94f780a3c9",
                    "name": "彩生活业务承包单位",
                    "province": "",
                    "city": "",
                    "region": null,
                    "longitude": 0.00,
                    "latitude": 0.00,
                    "orgType": "彩生活集团",
                    "orgTypeId": "1",
                    "dr": null,
                    "status": 0,
                    "memo": "",
                    "updateTs": "2017-12-05 17:32:56",
                    "createTs": "2016-01-25 20:00:00",
                    "familyType": "组织架构",
                    "familyTypeId": "0",
                    "sort": 71,
                    "orgLevel": ""
                  }, {
                    "orgUuid": "d30a5810-c30f-11e5-8697-9bf1e8b5d302",
                    "corpId": "a8c58297436f433787725a94f780a3c9",
                    "parentId": "0",
                    "dn": "ou=花样年(中国),dc=a8c58297436f433787725a94f780a3c9",
                    "name": "花样年(中国)",
                    "province": "河北省",
                    "city": "唐山市",
                    "region": "路北区",
                    "longitude": 0.00,
                    "latitude": 0.00,
                    "orgType": "彩生活集团",
                    "orgTypeId": "1",
                    "dr": null,
                    "status": 0,
                    "memo": "",
                    "updateTs": "2017-12-05 17:32:56",
                    "createTs": "2016-01-25 20:00:00",
                    "familyType": "组织架构",
                    "familyTypeId": "0",
                    "sort": 70,
                    "orgLevel": ""
                  }, {
                    "orgUuid": "9959f117-df60-4d1b-a354-776c20ffb8c7",
                    "corpId": "a8c58297436f433787725a94f780a3c9",
                    "parentId": "0",
                    "dn": "ou=彩生活服务集团,dc=a8c58297436f433787725a94f780a3c9",
                    "name": "彩生活服务集团",
                    "province": "河北市",
                    "city": "石家庄市",
                    "region": "长安区",
                    "longitude": 2.00,
                    "latitude": 0.00,
                    "orgType": "彩生活集团",
                    "orgTypeId": "342c68e5-df7b-41c0-bacb-51d92e8ac755",
                    "dr": null,
                    "status": 0,
                    "memo": "",
                    "updateTs": "2018-02-26 11:17:13",
                    "createTs": "2013-11-19 17:49:45",
                    "familyType": "组织架构",
                    "familyTypeId": "0",
                    "sort": 69,
                    "orgLevel": ""
                  }, {
                    "orgUuid": "ccbe146d-6ad8-401d-8950-d4920738c437",
                    "corpId": "a8c58297436f433787725a94f780a3c9",
                    "parentId": "0",
                    "dn": "ou=d,dc=a8c58297436f433787725a94f780a3c9",
                    "name": "d",
                    "province": "",
                    "city": "",
                    "region": "",
                    "longitude": 1.00,
                    "latitude": 2.00,
                    "orgType": "",
                    "orgTypeId": null,
                    "dr": null,
                    "status": 0,
                    "memo": "0",
                    "updateTs": "2018-04-24 16:01:24",
                    "createTs": "2017-09-21 12:10:37",
                    "familyType": "组织架构",
                    "familyTypeId": "0",
                    "sort": 68,
                    "orgLevel": ""
                  }],
                  "pageSize": 10,
                  "totalPage": 35,
                  "currentPage": 1,
                  "totalRecord": 350
                }

                console.log("访问失败！")
              })
          },
          changeismask() {
            this.ismask = true;
            this.MoreMask = false;
          },
          changeisdelmask() {
            this.isdelmask = true;
            this.MoreMask = false;
          },
          excel: function(qId) {
            console.log(qId);
            if(qId != null) {
              axios({
                method: 'post',
                url: '/investigator/myQuestionnairePc/loadingDate',
                headers: {
                  'Content-Type': 'application/json'
                },
                data: {
                  qId: qId
                }
              }).then(function(res) {
                console.log(res.data.data)
              }).catch(function(error) {
                alert("导出失败！")
              })
            } else {
              alert("问卷错误")
            }
          },
          delQue: function(qId) {
            console.log(qId);
            if(qId != null) {
              axios({
                method: 'post',
                url: '/investigator/questionnairePc/deleteQuestionnaire',
                headers: {
                  'Content-Type': 'application/json'
                },
                data: {
                  qId: qId
                }
              }).then(function(res) {
                console.log(res.data.data)
                if(res.data.code == 0) {
                  alert("删除成功！")
                }
              }).catch(function(error) {
                alert("删除失败！")
              })
            } else {
              alert("问卷错误")
            }
          },
          update() {
            console.log(this.value7);
            console.log("编辑");
            var cc = document.getElementsByClassName("el-tree-node is-focusable is-checked")[0];
            //console.log(cc);
            if(this.value7 == "" || cc == "") {
              alert("请填写完整问卷设置信息");
            } else {
              var areaid = cc.getElementsByTagName("span")[3].innerHTML;
              console.log(areaid);
              axios({
                method: 'post',
                url: '/investigator/questionnairePc/deleteQuestionnaire',
                headers: {
                  'Content-Type': 'application/json'
                },
                data: {
                  qId: this.qID
                }
              }).then(function(res) {
                console.log(res.data.data)
                if(res.data.code == 0) {
                  alert("设置成功！")
                }
              }).catch(function(error) {
                console.log("设置失败！")
              })
            }
          }
      },
      created() {
        console.log("访问isLogin成功");
        // 本地没有缓存过user，跳转去登陆
        //debugger
        var self = this;
        if(sessionStorage.getItem('user') == null) {
          alert("未登录，即将跳转到登录页面...");
          this.$router.replace({ name: 'login' })
        } else {
          var user = JSON.parse(sessionStorage.getItem('user'));
          axios({
            method: 'post',
            url: '/investigator/myQuestionnairePc/findAllPage?pageNum=1&pageSize=10&systemuserId=' + user.accountUuid,
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(function(res) {
            //console.log("访问接口成功，即将渲染页面");
            if(res.data.code == 0) {
              //console.log(res.data.date);
              var obj = res.data;
              var sub2list = new Array();
              var sublist = obj.date;
              for(var i = 0; i < sublist.length; i++) {
                var date = new Date(parseInt(sublist[i].qCreatetime));
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = date.getDate() + ' ';
                var h = (date.getHours() < 10 ? "0" + (date.getHours()) : date.getHours()) + ':';
                var m = (date.getMinutes() < 10 ? "0" + (date.getMinutes()) : date.getMinutes()) + ':';
                var s = date.getSeconds() < 10 ? "0" + (date.getSeconds()) : date.getSeconds();
                var model = new Object();
                model.qId = sublist[i].qId;
                model.date = sublist[i].qName + "(" + sublist[i].qId + ")",
                  model.name = (sublist[i].qStatus == 1 ? '开始调查' : sublist[i].qStatus == -1 ? '暂停调查' : '未投放'),
                  model.province = sublist[i].templateType.templateTypeName,
                  model.city = sublist[i].questionnairetotalnumber,
                  model.address = Y + M + D + h + m + s,
                  model.classId = (sublist[i].qStatus == 1 ? 'active' : 'pause');
                sub2list[i] = model;
              }
              //console.log(JSON.stringify(sub2list));
              self.tableData = sub2list;
              return;
            } else {
              console.log(res.data.msg);
            }
          }).catch(function(error) {
            //console.log("访问接口失败！");
            //测试用例
            var obj = {
              "msg": "查询成功",
              "date": [{
                "qId": "2f48f7921e53450b97da152a16ecdc43",
                "qName": "满意度问卷A",
                "qMaintitle": null,
                "qSubtitle": null,
                "qMaincopy": null,
                "qSubcopy": null,
                "qStatus": "0",
                "qCreatetime": 1524067200000,
                "qRange": null,
                "stageStatus": false,
                "templateId": null,
                "sample": null,
                "templateType": {
                  "templateTypeId": null,
                  "templateTypeName": "商住两用",
                  "templates": null,
                  "questionnaires": null
                },
                "systemuserId": null,
                "opinions": null,
                "subjects": null,
                "stages": null,
                "organizations": null,
                "questionnaireOrganizations": [null]
              }, {
                "qId": "44e6fd499d07467580eed58183d156ea",
                "qName": "满意度问卷A",
                "qMaintitle": null,
                "qSubtitle": null,
                "qMaincopy": null,
                "qSubcopy": null,
                "qStatus": "0",
                "qCreatetime": 1523980800000,
                "qRange": null,
                "stageStatus": false,
                "templateId": null,
                "sample": null,
                "templateType": {
                  "templateTypeId": null,
                  "templateTypeName": "商住两用",
                  "templates": null,
                  "questionnaires": null
                },
                "systemuserId": null,
                "opinions": null,
                "subjects": null,
                "stages": null,
                "organizations": null,
                "questionnaireOrganizations": [null]
              }, {
                "qId": "4bc9d0a767114241a6b7114bf173c6db",
                "qName": "满意度问卷A",
                "qMaintitle": null,
                "qSubtitle": null,
                "qMaincopy": null,
                "qSubcopy": null,
                "qStatus": "0",
                "qCreatetime": 1524067200000,
                "qRange": null,
                "stageStatus": false,
                "templateId": null,
                "sample": null,
                "templateType": {
                  "templateTypeId": null,
                  "templateTypeName": "商住两用",
                  "templates": null,
                  "questionnaires": null
                },
                "systemuserId": null,
                "opinions": null,
                "subjects": null,
                "stages": null,
                "organizations": null,
                "questionnaireOrganizations": [null]
              }],
              "code": 0,
              "count": 3
            };
            //console.log(obj);
            var sub2list = new Array();
            var sublist = obj.date;
            for(var i = 0; i < sublist.length; i++) {
              var date = new Date(parseInt(sublist[i].qCreatetime));
              var Y = date.getFullYear() + '-';
              var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
              var D = date.getDate() + ' ';
              var h = (date.getHours() < 10 ? "0" + (date.getHours()) : date.getHours()) + ':';
              var m = (date.getMinutes() < 10 ? "0" + (date.getMinutes()) : date.getMinutes()) + ':';
              var s = date.getSeconds() < 10 ? "0" + (date.getSeconds()) : date.getSeconds();
              var model = new Object();
              model.qId = sublist[i].qId;
              model.date = sublist[i].qName + "(" + sublist[i].qId + ")",
                model.name = (sublist[i].qStatus == 1 ? '开始调查' : sublist[i].qStatus == -1 ? '暂停调查' : '未投放'),
                model.province = sublist[i].templateType.templateTypeName,
                model.city = sublist[i].questionnairetotalnumber,
                model.address = Y + M + D + h + m + s,
                model.classId = (sublist[i].qStatus == 1 ? 'active' : 'pause');
              sub2list[i] = model;
            }
            //console.log(JSON.stringify(sub2list));
            self.tableData = sub2list;
            return;
          })
        }
      }
    }
</script>

<style scoped="scoped">
  #MyQues {
    min-width: 960px;
  }
  
  .q-header {
    height: 50px;
    background-color: rgb(235, 235, 235);
    width: 100%;
    line-height: 50px;
    overflow: hidden;
  }
  
  .q-header a {
    text-decoration: none;
  }
  
  .active {
    color: cornflowerblue;
  }
  
  .el-col {
    text-align: center;
    cursor: pointer;
  }
  
  .el-col a {
    color: black;
  }
  
  .el-col a:hover {
    text-decoration: underline;
  }
  
  .grid-con img {
    display: inline-block;
    height: 30px;
    width: 30px;
    background-color: #fff;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ccc;
  }
  
  .first-grid {
    font-size: 19px;
  }
  
  .grid-content-right img {
    height: 32px;
    width: 32px;
    background-color: #fff;
    border-radius: 50%;
    vertical-align: middle;
    border: 1px solid #ccc;
  }
  
  .grid-content-right .vertical-hr {
    height: 15px;
    width: 1px;
    background-color: #888;
    display: inline-block;
    margin: 0 5px -2px 5px;
  }
  /*内容区域*/
  
  .my-body {
    padding: 0 10px 10px 10px;
  }
  
  .my-body .my-header {
    height: 60px;
    line-height: 60px;
  }
  
  .my-body .my-header button {
    height: 40px;
    line-height: 40px;
    background-color: rgb(22, 155, 213);
    color: #fff;
    width: 150px;
    border-radius: 5px;
    border: none;
    font-size: 15px;
    cursor: pointer;
    outline: none;
  }
  
  .my-content {
    background-color: #fff;
    height: 80vh;
    width: 100%;
    overflow: auto;
    position: relative;
  }
  
  .my-content .active {
    display: inline-block;
    height: 9px;
    width: 9px;
    border-radius: 50%;
    background-color: greenyellow;
    margin-right: 5px;
  }
  
  .my-content .pause {
    display: inline-block;
    height: 9px;
    width: 9px;
    border-radius: 50%;
    background-color: red;
    margin-right: 5px;
  }
  /*更多遮罩层*/
  
  #MyQues .more-mask {
    position: absolute;
    top: 1%;
    right: 10%;
    height: 400px;
    width: 150px;
    border: 1px solid #B4BCCC;
    background-color: #fff;
    z-index: 999;
  }
  
  #MyQues .more-mask ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .more-mask ul li {
    height: 35px;
    width: 100%;
    display: block;
    padding-left: 20px;
  }
  
  .more-mask ul li a {
    color: black;
    text-decoration: none;
    font-size: 14px;
  }
  
  .more-mask ul li a:hover {
    color: rgb(22, 155, 213);
  }
  
  .more-mask .hr {
    height: 1px;
    width: 100%;
    background-color: #DCDCDC;
    margin-bottom: 5px;
  }
  /*遮罩层动画*/
  
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
  /*开始调查遮罩区*/
  
  #MyQues .hidden {
    display: none;
  }
  
  #MyQues .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 99;
    display: block;
  }
  
  #MyQues .mask .qm-content {
    height: 90%;
    width: 70%;
    z-index: 100;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid black;
    overflow: auto;
    padding: 20px 20px 10px 20px;
    box-sizing: border-box;
    overflow: auto;
  }
  
  #MyQues .qm-content h5 {
    margin: 0;
    font-size: 16px;
    font-family: "微软雅黑";
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
  }
  
  #MyQues .qm-content .close {
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 18px;
    cursor: pointer;
  }
  
  .qm-content .close:hover {
    color: red;
  }
  
  .qm-content .address {
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 40px;
    overflow: hidden;
  }
  
  .address input[type="text"] {
    height: 25px;
    line-height: 25px;
    border-radius: 5px;
    color: black;
    border: 1px solid black;
    padding: 2px 5px;
    outline: none;
    width: 350px;
    vertical-align: middle;
  }
  
  .address button {
    height: 29px;
    line-height: 29px;
    width: 100px;
    text-align: center;
    color: black;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid black;
    outline: none;
    vertical-align: middle;
    margin-left: 15px;
    cursor: pointer;
  }
  
  .address button:hover {
    color: rgb(22, 155, 213);
  }
  
  .Emp1 {
    margin-left: 20px;
  }
  
  .Emp1 span {
    font-size: 15px;
  }
  
  .Emp1 input[type="button"] {
    padding: 4px 40px;
    border-radius: 5px;
    background-color: #fff;
    color: black;
    border: 1px solid black;
    margin-left: 8px;
    outline: none;
    cursor: pointer;
  }
  
  .orga-checkbox {
    border: 1px solid #ccc;
    padding: 10px 5px;
    margin-left: 20px;
    width: 50%;
    display: inline-block;
    vertical-align: top;
  }
  
  .orga-right {
    display: inline-block;
    width: 45%;
    height: auto;
    vertical-align: top;
  }
  
  .orga-right table {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  
  .orga-right table th {
    height: 30px;
    line-height: 30px;
    font-weight: normal;
  }
  
  .qm-content .mask-btn {
    width: 80%;
    margin: 100px auto 10px;
    text-align: center;
  }
  
  .qm-content .mask-btn button {
    width: 150px;
    height: 35px;
    line-height: 35px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    outline: none;
    border: none;
  }
  
  .qm-content .mask-btn .mbtn1 {
    background-color: #fff;
    border: 1px solid black;
    color: black;
    margin-right: 5px;
  }
  
  .qm-content .mask-btn .mbtn2 {
    background-color: rgb(22, 155, 213);
    color: #fff;
    margin-left: 5px;
  }
  
  .el-table th {
    color: black;
  }
  /*新增加载更多按钮*/
 .load-more{
 	width: 150px;
 	height: 30px;
 	line-height: 30px;
 	background-color: #ccc;
 	color: #fff;
 	border: none;
 	outline: none;
 	margin-left: 40%;
 	margin-top: 10px;
 	cursor: pointer;
 }
</style>